<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立即领养</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<link rel="stylesheet" href="../css/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="../css/adoption.css">

<script src="../js/components/title.js"> </script>

<body>
    <div id="app">

        <div class="line-10"></div>
        <!--   banner  -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <img src="../images/index/banner.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index/banner.png" alt="">

                </div>
                <div class="swiper-slide">
                    <img src="../images/index/banner.png" alt="">

                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--   notice  -->
        <div class="notice">
            <img src="../images/adoption/icon1.png" alt="">
            公告公告公告公告公告公告公告公告公告
        </div>
        <!-- content  内容 -->
        <div class="content">
            <div class="content-title">领养计划</div>
            <div class="content-info">
                （1）内蒙古绒三河牛牧场扩充计划 <br>
                （2）领养3头牛每日分红产奶收益20元，到期1头补贴2000元<br>
                （3）根据牧场扩充计划，预计筹资买进“三河牛”1000头。按照国家农业厅养牛补贴相关规定，补贴按照“先购后补”返还。牧场为快速完成牧场扩编计划，按照每头牛补贴2000元标准一次性返还领养人，返还时间为10月10日——10月23日返还补贴。
            </div>
            <div class="tabs">
                <div @click="active=1" :class="{active:active==1}">3只300元 </div>
                <div @click="active=2" :class="{active:active==2}">3只300元 </div>
                <div @click="active=3" :class="{active:active==3}">3只300元 </div>
                <div @click="active=4" :class="{active:active==4}">3只300元 </div>
            </div>
            <div class="button btn ">
                立即领养
            </div>
        </div>
    </div>
    <script>


        var app = new Vue({
            el: "#app",
            data() {
                return {
                    active: 1
                }
            },
            mounted() {
                const options = {
                    autoplay: true,
                    parallax: true,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    on: {
                        slideChange: function () {
                            console.log(this.activeIndex);
                        },
                    },
                }
                const swiper = new Swiper('.swiper', options)
            },
            // 这里是 方法 
            methods: {

            },
        })
    </script>
</body>

</html>